<template>
  <div class="StationOverview">
    <div class="blueTitleStyle title betweenbox">
      <span>站所概览</span>
      <span v-if="mapByStation.stationId">{{mapByStation.stationMc}}</span>
    </div>
    <div
      class="StationOverview-con"
      v-loading="fzlLoading"
      element-loading-text="数据加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <div class="indicators">
        <div v-for="(item, index) in getterStationHj" :key="index">
          <div>{{item.name}}</div>
          <div>
            {{item.value}}
            <span>{{item.unt}}</span>
          </div>
        </div>
      </div>
      <div class="StationOverview-chartpie">
        <div>
          <!-- 目前跳转有问题，还不如去掉——轩哥20201108 -->
          <!-- <div v-to-router="'/warningtosolve/duty'"> -->
          <div>
            <PiechartHome title="负载率" :chartData="duty" />
          </div>
          <div>
            <div v-for="(item, index) in duty" :key="index" v-show="item.show">
              <div class="occupi" :style="{backgroundColor: item.color}"></div>
              <div>
                <div :style="{color: item.color}">{{item.name}}</div>
                <div @click="goDutySecond(newMainLoadCount,item.name)">{{item.value}}个</div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div>
            <PiechartHome title="辅控设备" :chartData="deflection" />
          </div>
          <div>
            <div v-for="(item, index) in deflection" :key="index" @click="toPath(item)">
              <div class="occupi" :style="{backgroundColor: item.color}"></div>
              <div class="occupi2">
                <div :style="{color: item.color}">{{item.name}}</div>
                <div>{{item.value}}个</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { GetSocketModule } from "@/store/modules/GetSocketData";
import { HomepageModule } from "@/store/modules/Homepage";
import PiechartHome from "@/components/PiechartHome/index.vue";
//loadsh
import lodash from "lodash";
interface indicators {
  name: string;
  value: number | string;
  color?: string;
  unt?: string;
}

@Component({
  components: { PiechartHome },
})
export default class StationOverview extends Vue {
  public indicatorsdata: indicators[] = [
    {
      name: "气压",
      value: "--",
      unt: "kPa",
    },
    {
      name: "风速",
      value: "--",
      unt: "/s",
    },
    {
      name: "温度",
      value: "--",
      unt: "℃",
    },
    {
      name: "湿度",
      value: "--",
      unt: "%",
    },
  ];
  get mapByStation() {
    let mapByStation = HomepageModule.mapByStation || {
      stationId: "",
      stationMc: "",
    };
    return mapByStation;
  }
  get currentStation() {
    let mapByStation = this.mapByStation;
    if (!mapByStation.stationId) {
      mapByStation = {
        stationId: this.currentBdz.BDZID,
        stationMc: this.currentBdz.BDZNAME,
      };
    }
    console.log("mapByStation", mapByStation);
    return mapByStation;
  }
  get getterStationHj() {
    let indicatorsdata = this.indicatorsdata;
    // let ddzid = this.currentBdz.BDZID;
    let ddzid = this.currentStation.stationId;
    // let ddzid='100435539'
    let getterStationHj = GetSocketModule.getterStationHj[ddzid] || {
      "040207": {},
      "040201": {},
      "040203": {}, //微气象传感器温度监测
      "040102": {}, //温湿度传感器温度监测
      "040204": {},
      "040103": {},
    };
    indicatorsdata[0].value = getterStationHj["040207"].value || "--";
    indicatorsdata[1].value = getterStationHj["040201"].value || "--";
    indicatorsdata[2].value =
      getterStationHj["040203"].value ||
      getterStationHj["040102"].value ||
      "--";
    indicatorsdata[3].value =
      getterStationHj["040204"].value ||
      getterStationHj["040103"].value ||
      "--";
    indicatorsdata[0].unt = getterStationHj["040207"].unit || "kPa";
    indicatorsdata[1].unt = getterStationHj["040201"].unit || "m/s";
    indicatorsdata[2].unt = getterStationHj["040203"].unit || "℃";
    indicatorsdata[3].unt = getterStationHj["040204"].unit || "%";
    return indicatorsdata;
  }
  fzlLoading: boolean = false;
  public duty = [
    {
      name: "80%以下",
      value: 0,
      show: false,
      color: "#00C9FF",
    },
    {
      name: "80%-100%",
      value: 0,
      show: true,
      color: "#54A3FE",
    },
    {
      name: "100%以上",
      value: 0,
      show: true,
      color: "#EB6F49",
    },
  ];
  public currentBdz: { [key: string]: any } = {};
  // get deflection() {
  //   let getterAllAuxiliaryByCdId = GetSocketModule.getterAllAuxiliaryByCdId;
  //   let mapByStation = HomepageModule.mapByStation;
  //   let data = ["090310", "090401", "090501", "090601"];
  //   let all = [];
  //   let zs = 0;
  //   let gjs = 0;
  //   // data.forEach((item) => {
  //   //   let AllAuxiliary = getterAllAuxiliaryByCdId[item] || [];
  //   //   all.push(...AllAuxiliary);
  //   // });
  //   // all.forEach((v) => {
  //   //   if (mapByStation.stationId) {
  //   //     if (mapByStation.stationId === v.stationId) {
  //   //       if (v.isGj === "gj") {
  //   //         gjs++;
  //   //       }
  //   //       zs++;
  //   //     }
  //   //   } else {
  //   //     if (v.isGj === "gj") {
  //   //       gjs++;
  //   //     }
  //   //     zs++;
  //   //   }
  //   // });
  
          

  //   return [
  //     {
  //       name: "正常",
  //       id:'1',
  //       value: zs,
  //       path: "/homepage/sbzs",
  //       color: "#54A3FE",
  //     },
  //     // {
  //     //   name: "异常",
  //     //   // name: "告警",
  //     //   value: gjs,
  //     //   path: "/homepage/sbbw",
  //     //   color: "#EB6F49",
  //     // },
  //      {
  //       name: "异常",
  //       // name: "告警",
  //       id:'0',
  //       value: gjs,
  //       path: "/homepage/sbzs",
  //       color: "#EB6F49",
  //     },
  //   ];
  // }
  toPath(item) {
    let path = item.path.substring(item.path.length - 4);
    
    this.$router.push({
      name:path,
      query:{id:item.id}
    });
  }
  // 单击数字跳转到二级页面
  private goDutySecond(data: any, type: any) {
    // console.log("data,type:", data, type);
    let dutyType = "0";
    if (type == "80%以下") {
      dutyType = "1";
    } else if (type == "80%-100%") {
      dutyType = "2";
    } else if (type == "100%以上") {
      dutyType = "3";
    }
    this.$router.push({
      name: "dutysecondindex",
      params: {
        dutySecondData: data,
        dutyType: dutyType,
      },
    });
  }
  // 监听主编负载负载率
  get newMainLoadCount() {
    let mainLoadCount: any = lodash.cloneDeep(this.duty);
    let total =
      mainLoadCount[0].value + mainLoadCount[1].value + mainLoadCount[2].value;
    let mainArr = {
      total: total,
      typeOne: mainLoadCount[0].value,
      typeTwo: mainLoadCount[1].value,
      typeThree: mainLoadCount[2].value,
    };
    return mainArr;
  }
deflection:any=[
        {
        name: "正常",
        id:'0',
        value: 0,
        path: "/homepage/sbzs",
        color: "#54A3FE",
      },
      // {
      //   name: "异常",
      //   // name: "告警",
      //   value: gjs,
      //   path: "/homepage/sbbw",
      //   color: "#EB6F49",
      // },
       {
        name: "异常",
        // name: "告警",
        id:'1',
        value: 0,
        path: "/homepage/sbzs",
        color: "#EB6F49",
      },
]
  zcs(){
      (this as any).$services
          .getSbCount({ })
          .then((result: any) => {

            this.deflection[0].value=result.data
          })
          .catch((err: object) => {
            console.log(err);
          });
  }
  gjs(){
          (this as any).$services
          .getSbBwCount({ })
          .then((result: any) => {
            this.deflection[1].value=result.data
            console.log(result);
          })
          .catch((err: object) => {
            console.log(err);
          });
  }
  mounted() {
    this.queryMapXY();
    // this.getWeatherStation();
    this.fetchQuertInitZbfz();
    // this.setTimer();
    this.zcs()
    // this.gjs()
  }
  beforeDestroy() {
    this.clearTimer();
  }
  mapDataSuccess = [];
  timer = null;
  index = 0;
  setTimer() {
    this.clearTimer();
    this.index = 0;
    this.timer = window.setInterval(() => {
      this.setCurrentBdz();
    }, 20 * 1000);
  }
  clearTimer() {
    if (this.timer) {
      window.clearInterval(this.timer);
      this.timer = null;
    }
  }
  setCurrentBdz() {
    let index = this.index;
    let currentBdz = this.mapDataSuccess[index];
    if (currentBdz) {
      this.currentBdz = {
        BDZID: currentBdz.BDZID,
        BDZNAME: currentBdz.BDZMC,
      };
      let length = this.mapDataSuccess.length;
      if (index > length - 1) {
        this.index = 0;
      } else {
        this.index++;
      }
    }
  }
  queryMapXY() {
    (this as any).$services
      .queryMapXY()
      .then((result: any) => {
        this.mapDataSuccess = result.data;
        this.index = 0;
        this.setCurrentBdz();
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  getWeatherStation() {
    this.fzlLoading = true;
    (this as any).$services
      .getWeatherStation()
      .then((result: any) => {
        this.currentBdz = result.data || {};
        this.fzlLoading = false;
      })
      .catch((err: object) => {
        this.fzlLoading = false;
      });
  }
  fetchQuertInitZbfz() {
    this.fzlLoading = true;
    (this as any).$services
      .quertInitZbfz()
      .then((result: any) => {
        if (result.code === 200) {
          this.duty[0].value = result.data.down80 || 0;
          this.duty[1].value = result.data.down100 || 0;
          this.duty[2].value = result.data.on100 || 0;
        } else {
          this.duty[0].value = 0;
          this.duty[1].value = 0;
          this.duty[2].value = 0;
        }
        this.fzlLoading = false;
      })
      .catch((err: object) => {
        this.duty[0].value = 0;
        this.duty[1].value = 0;
        this.duty[2].value = 0;
        this.fzlLoading = false;
      });
  }
}
</script>

<style lang="scss" scoped>
.StationOverview {
  width: 100%;
  height: 100%;
  .title {
    height: 0.27rem;
    line-height: 0.27rem;
    font-size: 0.18rem;
    color: #fff;
    width: 100%;
    padding: 0 0.2rem;
  }
  &-con {
    width: 100%;
    height: calc(100% - 0.27rem);
  }
  .indicators {
    display: flex;
    justify-content: space-around;
    margin-top: 0.1rem;
    > div {
      background-image: url("../../../../assets/img/HomePage/zs_bk.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
      max-width: 1.1rem;
      min-width: 0.9rem;
      height: 0.39rem;
      > div {
        &:nth-child(1) {
          font-size: 0.14rem;
          color: #c9e4fe;
          padding-left: 0.06rem;
        }
        &:nth-child(2) {
          font-size: 0.16rem;
          color: #fff;
          padding-left: 0.06rem;
        }
        span {
          font-size: 0.12rem;
        }
      }
    }
  }
  .StationOverview-chartpie {
    width: 100%;
    height: calc(100% - 0.5rem);
    display: flex;
    > div {
      width: 50%;
      height: 100%;
      display: flex;
      cursor: pointer;
      > div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        &:nth-child(1) {
          width: 50%;
          height: 100%;
        }
        &:nth-child(2) {
          width: 50%;
          height: 100%;
        }
        > div {
          display: flex;
          margin-top: 0.1rem;
          .occupi {
            width: 0.03rem;
            height: 0.35rem;
            background-color: green;
            margin-right: 0.1rem;
            cursor: pointer;
          }
          .occupi2 {
            cursor: pointer;
            > div {
              &:nth-child(1) {
                font-size: 0.14rem;
              }
              &:nth-child(2) {
                font-size: 0.18rem;
              }
            }
          }
        }
      }
    }
  }
}
</style>

